.leftfix {
  float: left;
}

.rightfix {
  float: right;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

body{
  background: #1b2838;
  background-image: url("https://store.st.dl.eccdnx.com/public/images/v6/colored_body_top.png?v=2");
  height: 2200px;
  background-repeat: no-repeat;

}

.global_header {
  background: #171d25 center;
}

.banner {
  font-weight: normal;
  margin: 0 16px;
}

.banner .content {
  width: 940px;
  height: 104px;
  margin: 0 auto;
  position: relative;
}

.log {
  padding-top: 30px;
  margin-right: 40px;
}

.log img {
  width: 176px;
  height: 44px;
}

.nav-menu {
  position: absolute;
  left: 200px;
}

.nav-menu a {
  display: block;
  position: relative;
  padding-top: 45px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
  line-height: 16px;
  float: left;
  color: #dcdedf;
  text-transform: uppercase;
  font-size: 16px;
  font-family: "Motiva Sans", "Twemoji", "Noto Sans", Helvetica, sans-serif;
  font-weight: bold;


}

.nav-menu>a:hover{
  color: white;
}

.content .action {
  position: absolute;
  top: 6px;
  right: 0;
  color: #b8b6b4;
  font-size: 12px;
}

.content .action .item {
  float: left;
}

.header_installsteam_btn_content {
  color: #e5e4dc;
  background-image: url(https://store.st.dl.eccdnx.com/public/shared/images/header/btn_header_installsteam_download.png?v=1);
  background-repeat: no-repeat;
  background-position: 10px 5px;
  padding-left: 35px;
  padding-right: 9px;
  background-color: rgba(103, 112, 123, 0.2);

}

.install {
  height: 24px;
  line-height: 24px;
  margin-right: 6px;
}

.install:hover{
  background-color: #3D4450;
}

.notice {
  width: 46px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #5c7e10;
  color: white;
  margin-right: 6px;
}

.notice a {
  color: white;
}

.notice .notice-icon {
  width: 14px;
}

.account {
  padding-right: 18px;
  padding-left: 4px;
  line-height: 25px;
  background-image: url(https://store.st.dl.eccdnx.com/public/shared/images/popups/btn_arrow_down_padded.png);
  background-position: right center;
  background-repeat: no-repeat;
}

.account a{
  color: #b8b6b4;
}

.account a:hover{
  color: white;
}


.avatar {
  margin-left: 3px;
}
.avatar img {
  width: 32px;
  height: 32px;
  padding: 1px;
  background: linear-gradient(to bottom, #515151 5%, #474747 95%);
}

.balance{
  text-align: right;
  padding-right: 55px;
  line-height: normal;
}
.balance a{
  color: #b8b6b4;
}

.balance a:hover{
  color: white;
}
body{
  overflow: visible;
}

::-webkit-scrollbar {
  height: 12px;
  width: 14px;
  background: transparent;
  z-index: 12;
  overflow: visible;
}

::-webkit-scrollbar-thumb {
  width: 10px;
  height: 10px;
  background-color: #434953;
  border-radius: 10px;
  z-index: 12;
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  transition: background-color .32s ease-in-out;
  margin: 4px;
  min-height: 32px;
  min-width: 32px;

}

::-webkit-scrollbar-corner {
  background: #020202;
}

::-webkit-scrollbar-track {
  background-color: unset;  /* 滚动条轨道颜色 */
}

.notice-ld:hover  {
  /*原点位于元素的水平中心（center）和垂直顶部（top）位置*/
  transform-origin: center top;
  /* 0.3 秒内 匀速完成 2 次动画 */
  animation: left-Right-shaking 0.3s linear 2;

}

/*左右摇摆关键帧动画*/
@keyframes left-Right-shaking {
  0% {transform: rotate(0deg);}
  1% {transform: rotate(1deg);}
  2% {transform: rotate(2deg);}
  3% {transform: rotate(3deg);}
  4% {transform: rotate(4deg);}
  5% {transform: rotate(5deg);}
  6% {transform: rotate(6deg);}
  7% {transform: rotate(7deg);}
  8% {transform: rotate(8deg);}
  9% {transform: rotate(9deg);}
  10% {transform: rotate(10deg);}
  11% {transform: rotate(11deg);}
  12% {transform: rotate(12deg);}
  13% {transform: rotate(13deg);}
  14% {transform: rotate(14deg);}
  15% {transform: rotate(15deg);}
  16% {transform: rotate(16deg);}
  17% {transform: rotate(17deg);}
  18% {transform: rotate(18deg);}
  19% {transform: rotate(19deg);}
  20% {transform: rotate(20deg);}
  21% {transform: rotate(21deg);}
  22% {transform: rotate(22deg);}
  23% {transform: rotate(23deg);}
  24% {transform: rotate(24deg);}
  25% {transform: rotate(25deg);}
  26% {transform: rotate(24deg);}
  27% {transform: rotate(23deg);}
  28% {transform: rotate(22deg);}
  29% {transform: rotate(21deg);}
  30% {transform: rotate(20deg);}
  31% {transform: rotate(19deg);}
  32% {transform: rotate(18deg);}
  33% {transform: rotate(17deg);}
  34% {transform: rotate(16deg);}
  35% {transform: rotate(15deg);}
  36% {transform: rotate(14deg);}
  37% {transform: rotate(13deg);}
  38% {transform: rotate(12deg);}
  39% {transform: rotate(11deg);}
  40% {transform: rotate(10deg);}
  41% {transform: rotate(9deg);}
  42% {transform: rotate(8deg);}
  43% {transform: rotate(7deg);}
  44% {transform: rotate(6deg);}
  45% {transform: rotate(5deg);}
  46% {transform: rotate(4deg);}
  47% {transform: rotate(3deg);}
  48% {transform: rotate(2deg);}
  49% {transform: rotate(1deg);}
  50% {transform: rotate(0deg);}
  51% {transform: rotate(-1deg);}
  52% {transform: rotate(-2deg);}
  53% {transform: rotate(-3deg);}
  54% {transform: rotate(-4deg);}
  55% {transform: rotate(-5deg);}
  56% {transform: rotate(-6deg);}
  57% {transform: rotate(-7deg);}
  58% {transform: rotate(-8deg);}
  59% {transform: rotate(-9deg);}
  60% {transform: rotate(-10deg);}
  61% {transform: rotate(-11deg);}
  62% {transform: rotate(-12deg);}
  63% {transform: rotate(-13deg);}
  64% {transform: rotate(-14deg);}
  65% {transform: rotate(-15deg);}
  66% {transform: rotate(-16deg);}
  67% {transform: rotate(-17deg);}
  68% {transform: rotate(-18deg);}
  69% {transform: rotate(-19deg);}
  70% {transform: rotate(-20deg);}
  71% {transform: rotate(-21deg);}
  72% {transform: rotate(-22deg);}
  73% {transform: rotate(-23deg);}
  74% {transform: rotate(-24deg);}
  75% {transform: rotate(-25deg);}
  76% {transform: rotate(-24deg);}
  77% {transform: rotate(-23deg);}
  78% {transform: rotate(-22deg);}
  79% {transform: rotate(-21deg);}
  80% {transform: rotate(-20deg);}
  81% {transform: rotate(-19deg);}
  82% {transform: rotate(-18deg);}
  83% {transform: rotate(-17deg);}
  84% {transform: rotate(-16deg);}
  85% {transform: rotate(-15deg);}
  86% {transform: rotate(-14deg);}
  87% {transform: rotate(-13deg);}
  88% {transform: rotate(-12deg);}
  89% {transform: rotate(-11deg);}
  90% {transform: rotate(-10deg);}
  91% {transform: rotate(-9deg);}
  92% {transform: rotate(-8deg);}
  93% {transform: rotate(-7deg);}
  94% {transform: rotate(-6deg);}
  95% {transform: rotate(-5deg);}
  96% {transform: rotate(-4deg);}
  97% {transform: rotate(-3deg);}
  98% {transform: rotate(-2deg);}
  99% {transform: rotate(-1deg);}
  100% {transform: rotate(0deg);}
}

.menu-area{
  height: 450px;
  background-color: black;
  text-align: center;
  position: relative;

}

.menu-area .menu{
  position: absolute;
  top: 0;
  left: 25%;
  z-index: 3;
  width: 940px;
  height: 66px;
}

.menu-line-1{
  text-align: end;
  margin-top: 8px;
  color: white;
  height: 20px;
}

.menu-line-1 .menu-line-1-icon {
  width: 15px;
  vertical-align: sub;
}

.menu-line-1 div{
  box-sizing: border-box;
  height: 20px;
  line-height: 20px;
  border-radius: 0;
  box-shadow: 0 0 3px #000;
  border: transparent;
  color: white;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
}

.menu-line-1 div:first-child{
  background-color: #5c7e10;
  float: right;
  width: 121.19px;
  padding: 0 20px;
}

.menu-line-1 div:last-child{
  background-color: #7CA4AE;
  border-radius: 1px;
  float: right;
  width: 107.66px;
  margin: 0 1px;
}



.menu-line-2{
  height: 35px;
  line-height: 35px;
  width: 100%;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, rgba(62, 103, 150, 0.919) 11.38%, rgba(58, 120, 177, 0.8) 25.23%, rgb(15, 33, 110) 100%);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.foryou_avatar{
  width: 16px;
  height: 16px;
}

.menu-line-2 .menu-line-2-left{
  display: flex;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  align-items: center;
}

.menu-line-2-left-item{
  padding: 0 10px 0 15px;
  color: #E5E5E5;
}

.menu-line-2-left-item-first{
  padding: 0 10px 0 10px;
  color: #E5E5E5;
}

.menu-line-2-left-item-img{
  margin-left: 10px;
}

.recommend{
  position: relative;
}

.sub-menu{
  position: absolute;
  left: 0;
  top: auto;
  display: none;
  background: linear-gradient(90deg, rgba(33, 162, 255, 0.1) 1.89%, rgba(50, 50, 51, 0) 50%), linear-gradient(180deg, #575860 11.6%, #3A4852 54.73%, #2C2D34 100%);
  padding: 8px 5px 8px 5px;
  font-family: Motiva Sans, Arial, Helvectica, Verdana, sans-serif;
  font-size: 12px;
}

.sub-menu-recommend{
  position: absolute;
  float: left;
  width: 200px;
  left: 0;
  top: auto;
  display: none;
  background: linear-gradient(90deg, rgba(33, 162, 255, 0.1) 1.89%, rgba(50, 50, 51, 0) 50%), linear-gradient(180deg, #575860 11.6%, #3A4852 54.73%, #2C2D34 100%);
  padding: 8px 5px 8px 5px;
  font-family: Motiva Sans, Arial, Helvectica, Verdana, sans-serif;
  font-size: 12px;
}

.sub-menu-recommend-area{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 150px;
  height: 300px;
}

.sub-menu-item-lable{

  text-align: start;
  color: #2EBFFF;
  font-size: 11px;
  padding: 3px 1px 2px 1px;
  margin: 0px 10px 3px 13px;
  margin-top: 16px;
  text-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

.sub-menu-item{
  color: #E5E5E5;
  text-align: start;
  padding: 3px 1px 2px 1px;
  margin: 0px 10px 3px 13px;
  height: 24px;
  line-height: normal;
  box-sizing: border-box;
  width: fit-content;

}

/*悬停菜单时*/
.menu-line-2-left > span:hover{
  color: white;
  background: linear-gradient(90deg,
  rgba(33,162,255,0.25)0%,
  rgba(33,162,255,0.15)50%,
  rgba(50,50,51,0)100%);
  text-shadow: 0 2px 3px rgba(0,0,0,0.3);
  cursor: pointer;
}

/*显示子菜单*/
.menu-line-2-left > span:hover .sub-menu{
  display: block;
}

/*显示新鲜推荐子菜单*/
.menu-line-2-left > span:hover .sub-menu-recommend{
  display: block;
}

/*鼠标悬停显示下划线*/
.menu-line-2-left .sub-menu .sub-menu-item:hover,
.menu-line-2-left .sub-menu-recommend .sub-menu-item:hover {
  color: white;
  border-bottom: 2px solid white;
}

.menu-line-2 .menu-line-2-right{
  display: flex;
  height: 27px;
  background-color: #316282;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0 6px;
  cursor: text;
}

.menu-line-2-right input{
  color: white;
  font-size: 14px;
  margin-top: 1px;
  font-family: "Motiva Sans", Sans-serif;
  font-weight: 300;
  background-color: transparent;
  border: none;
  font-style: italic;
}

.menu-line-2-right input:focus{
  font-style: normal;
}


